<template>
    <div class="advancedCtf">
        <assets-head :title="$t('c2c认证')"></assets-head>
        <div class="flex items-center justify-center pt-46 pb-60" v-if="status!=0">
            <img :src="require(`../../assets/image/certificationCenter/advStatus${status}.png`)" alt="" class="w-36 h-36" />
            <span class="ml-16 font-32 textColor">{{fixState(status)}}</span>
        </div>
        <div class="px-32">
            <ExChecked class="mb-42" :list="list" @checked="onChecked" ref="idRadio"></ExChecked>
            <ExInput  :disabled="disabled()" :clearBtn="!disabled()"  :placeholderText="$t('请输入证件号（必填）')" v-model="identityNumber" />
            <ExInput :label="$t('亲属电话')" :disabled="disabled()" :clearBtn="!disabled()" :placeholderText="$t('请输入亲属电话（必填）')" v-model="relativesPhone" />
            <ExInput :label="$t('同事电话')" :disabled="disabled()" :clearBtn="!disabled()" :placeholderText="$t('请输入同事电话（可选）')" v-model="colleaguePhone" />
        </div>
      <!--      上传区域-->
      <div class="uploadImg px-32">
        <div class="upload">
          <div class="flex mt-33 mb-80 justify-between">
            <div class="flex-1 flex flex-col text-center justify-center items-center">
              <div class="upload-wrap">
                <van-uploader v-model="propertyCertificate" :max-count="1" :after-read="afterRead"
                              @click-upload="onClickUpload('propertyCertificate')" />
              </div>
              <div class="mt-32 font-26 h-20" style="color:#868D9A;">{{ $t('个人收入证明') }}</div>
            </div>
            <div class="flex-1 flex flex-col text-center justify-center items-center">
              <div class="upload-wrap">
                <van-uploader v-model="incomeCertificate" :max-count="1" :after-read="afterRead"
                              @click-upload="onClickUpload('incomeCertificate')"/>
              </div>
              <div class="mt-32 font-26 h-20" style="color:#868D9A;">{{ $t('资产证明') }}</div>
            </div>
          </div>
          <div class="flex mt-33 mb-80 justify-between">
            <div class="flex-1 flex flex-col text-center justify-center items-center">
              <div class="upload-wrap">
                <van-uploader v-model="workImg" :max-count="1" :after-read="afterRead"
                              @click-upload="onClickUpload('workImg')" />
              </div>
              <div class="mt-32 font-26 h-20" style="color:#868D9A;">{{ $t('工作证明') }}</div>
            </div>
            <div class="flex-1 flex flex-col text-center justify-center items-center">
              <div class="upload-wrap">
                <van-uploader v-model="idImg1" :max-count="1" :after-read="afterRead"
                              @click-upload="onClickUpload('idImg1')" />
              </div>
              <div class="mt-32 font-26 h-20" style="color:#868D9A;">{{ $t('身份证明') }}</div>
            </div>
          </div>
        </div>
      </div>

      <!--      确认按钮-->
        <div class="btnMain font-34 py-26 rounded-lg text-center mt-60 mx-32 text-white" @click="submit" v-if="status==0 || status==3">
          <span v-if="status==0 ">{{$t('申请认证')}}</span>
          <span v-if="status==3 ">{{$t('重新申请')}}</span>
        </div>
    </div>
</template>

<script>
import assetsHead from "@/components/assets-head";
import ExInput from "@/components/ex-input";
import Axios from '@/API/userCenter'
import ExChecked from "@/components/ex-checked/index.vue";
import { Uploader } from "vant";
import { _uploadImage,} from "@/API/fund.api";
import {replaceImgUrl} from "@/utils/utis";
    export default {
        props: {

        },
        components: {
          ExChecked,
            assetsHead,
            ExInput,
            [Uploader.name]: Uploader,
        },
        data(){
            return {
              list:[
                {
                  name: this.$t('身份证'),
                  type: 1
                },
                {
                  name: this.$t('护照'),
                  type: 2
                },
                {
                  name: this.$t('驾驶证') ,
                  type:3
                },
              ],
              identityType:1,//默认选中身份证
              identityNumber:'',
              workImg: [],
              incomeCertificate: [],
              propertyCertificate: [],
              idImg1: [],
              relativesPhone:'',
              colleaguePhone:'',
              status:'',
            }
        },
        created(){
            this.getC2cInfo();
        },
        methods: {
            onChecked(type){
              this.identityType = type;
            },
            onClickUpload(type) {
              this.curFile = type
            },
            afterRead(file) { /// 处理文件
              // console.log(file)
              file.status = 'uploading'
              file.message = this.$t('上传中...')
              _uploadImage(file).then(data => {
                file.status = 'success';
                file.message = this.$t('上传成功');
                file.resURL = data
                this[this.curFile] = [file]
              }).catch(err => {
                file.status = 'failed';
                file.message = this.$t('图片上传失败');
              })
            },
            disabled() { // 是否禁用按钮
              return ![0, 3, ''].includes(this.status)
            },
            getC2cInfo(){
                Axios._getC2cCtfInfo()
                .then(res=>{
                    this.status = res.data.status
                    this.identityNumber = res.data.identity_number
                    // 未认证返回的type0是没有对应的 要换成默认的
                    this.$nextTick(()=>{
                      this.$refs.idRadio.radio =  res.data.identity_type === 0 ? this.identityType : res.data.identity_type
                    })
                    this.relativesPhone = res.data.relatives_phone
                    this.colleaguePhone = res.data.colleague_phone
                    this.incomeCertificate = res.data.idimg_1 ? [{ url: replaceImgUrl(res.data.income_certificate_path), resURL: res.data.income_certificate}] : []
                    this.idImg1 = res.data.idimg_1 ? [{ url: replaceImgUrl(res.data.idimg_1_path), resURL: res.data.idimg_2 }] : []
                    this.workImg = res.data.work_img ? [{ url: replaceImgUrl(res.data.work_img_path), resURL: res.data.work_img }] : []
                    this.propertyCertificate = res.data.property_certificate ? [{ url: replaceImgUrl(res.data.property_certificate_path), resURL: res.data.property_certificate }] : []
                })
            },
            fixState(status){
                let str = ''
                if (status == 1) {
                    str = this.$t('审核中')
                } else if (status == 2) {
                    str = this.$t('通过认证')
                }else if(status == 3) {
                    str = this.$t('认证失败')
                }
                return str;
            },
            submit(){
                if (this.identityNumber == '' || this.identityNumber == null) {
                    this.$toast(this.$t('身份信息不能为空'))
                    return false;
                }
                if (this.relativesPhone == ''|| this.relativesPhone == null ) {
                    this.$toast(this.$t('亲属电话不能为空'))
                    return false;
                }
                if (!this.idImg1.length || !this.incomeCertificate.length || !this.propertyCertificate.length || !this.workImg.length) {
                  this.$toast(this.$t('请上传完整证件信息'))
                  return
                }
                Axios._c2cCtfApply({
                    identity_type: this.identityType,
                    identity_number: this.identityNumber,
                    work_type: '1',//工作证明 随便传个1吧 只是图片不区分
                    work_img: this.workImg[0].resURL,
                    income_certificate: this.incomeCertificate[0].resURL,
                    property_certificate: this.propertyCertificate[0].resURL,
                    relatives_phone: this.relativesPhone,
                    colleague_phone: this.colleaguePhone,
                    idimg_1:this.idImg1[0].resURL,
                    // idimg_2:'222',
                    // idimg_3:'333',
                }).then(res=>{
                    this.$router.push({ path: "/verified", query: { type: 'c2c' } })
                    this.$toast(this.$t('申请成功'));
                }).catch(err=>{
                    if(err.code === 'ECONNABORTED'){this.$toast(this.$t('网络超时！'));}
                    else if(err.msg !== undefined){this.$toast(this.$t(err.msg));}         
                })
            }
        }
    }
</script>

<style lang="scss" scoped>
.advancedCtf{
    width: 100%;
    box-sizing: border-box;
}
.uploadImg {

  .upload-wrap {
    width: 356px;
    height: 288px;
    display: flex;
    justify-content: center;
    align-items: center;

    ::v-deep .van-uploader__upload {
      width: 356px !important;
      height: 288px !important;
    }
  }
}
</style>